<template>
  <u-toast ref="uToast"></u-toast>
  <u-navbar
    v-if="Types.statusType == 0"
    :title="Title"
    :autoBack="true"
    :safeAreaInsetTop="true"
    :placeholder="true"
  >
  </u-navbar>
  <!-- <template v-if="Types.statusType != 0"> -->
  <template v-if="statusShowType">
    <!-- !就近购买 -->
    <Map
      style="z-index: 99"
      :FunShow="true"
      v-if="orderObj.sfBuy == 0"
      :polylines="routeLine.points"
      :sfBuy="orderObj.sfBuy"
      :markCover="covers"
    ></Map>
    <!-- 就近购买 -->
    <MapHere
      style="z-index: 99"
      :FunShow="true"
      v-if="orderObj.sfBuy == 1"
      :polylines="routeLine.points"
      :statusType="Types.statusType"
      :markCover="covers"
    ></MapHere>
  </template>
  <view :class="Types.statusType == 0 ? '' : 'Mappos_a'">
    <!-- <view style="padding: 20rpx"> -->
    <view class="OrderDeatil">
      <template v-if="Types.statusType == 0">
        <!-- 订单状态 -->
        <view class="item">
          <view class="OrderStatus flex_al_cen_ju_bet">
            <view class="price_status flex_al_cen_ju_bet">
              <view class="price red"
                >￥ <text>{{ orderObj.price }}</text></view
              >
              <view class="status">待接单</view>
            </view>
            <!-- 跑腿 -->
            <view class="Runerrands">
              帮我{{
                orderObj.riderDo == 0
                  ? "送"
                  : orderObj.riderDo == 1
                  ? "买"
                  : orderObj.riderDo == 2
                  ? "取"
                  : "买"
              }}
            </view>
          </view>
        </view>
      </template>
      <!-- 地址 -->
      <view class="item">
        <!-- 状态栏 -->
        <view class="StatusBar pos_r">
          <!-- 预约 -->
          <view class="pre pos_a">
            <image
              v-if="orderObj.isIm == 0"
              src="../../static/images/pulice/yu.png"
              mode="scaleToFill"
            />
          </view>
          <view class="Bar">
            <view class="Timestatus flex_al_cen_ju_bet">
              <view class="Time flex">
                <view v-if="Types.statusType !== 0" class="num"
                  >帮我{{
                    orderObj.riderDo == 0
                      ? "送"
                      : orderObj.riderDo == 1
                      ? "买"
                      : orderObj.riderDo == 2
                      ? "取"
                      : "买"
                  }}</view
                >
                <u-icon
                  name="clock"
                  color="#FF0000"
                  size="16"
                  v-if="orderObj.isIm == 0"
                ></u-icon>
                <u-icon
                  name="clock"
                  color="#FF0000"
                  size="16"
                  v-if="orderObj.isIm == 1"
                ></u-icon>
                <view
                  class="mar_l_r flex"
                  style="color: #ff0000; font-size: 26rpx"
                  v-if="orderObj.isIm == 1"
                >
                  {{ textTime(orderObj.createTime) }}取货
                </view>
                <view
                  class="mar_l_r flex"
                  style="color: #ff0000; font-size: 26rpx"
                  v-else
                >
                  立即配送
                </view>
              </view>
            </view>
          </view>
        </view>
        <Address
          :Type="Types.statusType"
          :orderType="Types.orderType"
          :TitleShow="TitleShow"
          :item="orderObj"
        >
        </Address>
      </view>
      <!-- 跑腿 物品信息 -->
      <!--  帮我买 -->
      <view class="item" v-if="Types.orderType == 1">
        <view class="deatils">
          <view class="Title"> 物品信息 </view>
          <view class="msg">
            <view class="flex_al_cen_ju_bet" v-if="orderObj.articleType">
              <view>物品类型</view>
              <view> {{ orderObj.articleType }}</view>
            </view>
            <view class="flex_al_cen_ju_bet" v-if="orderObj.articlePrice">
              <view>物品价格 </view>
              <view> {{ orderObj.articlePrice }}</view>
            </view>
            <view class="flex_al_cen_ju_bet" v-if="orderObj.articleWeight">
              <view>商品重量 </view>
              <view>{{ orderObj.articleWeight || "0" }}</view>
            </view>
            <view class="flex_al_cen_ju_bet" v-if="orderObj.itemNum">
              <view>物品数量 </view>
              <view> {{ orderObj.itemNum || "0" }}个</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 跑腿 备注 -->
      <view class="item">
        <view class="remarks">
          <view class="Title"> 备注 </view>
          <u-textarea
            height="158rpx"
            disabled
            v-model="orderObj.remark"
            class="margin_t_b"
            >{{ orderObj.remark }}</u-textarea
          >
        </view>
      </view>
      <!-- 订单数据 -->
      <view class="item">
        <view class="deatils">
          <view class="Title"> 订单信息 </view>
          <view class="msg">
            <view class="flex_al_cen_ju_bet">
              <view>订单编号 </view>
              <view> {{ orderObj.orderSn }}</view>
            </view>
            <view class="flex_al_cen_ju_bet">
              <view>下单时间</view>
              <view> {{ forDate(orderObj.createTime) }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- </view> -->
  </view>
  <!-- 抢单 -->
  <view
    class="GrabanOrder"
    v-if="Types.statusType == 0"
    @click="makeOrder(proxy.$page.options.id)"
  >
    <text>{{ butChange.title }}</text>
    <u-count-down
      v-if="orderObj.isIm == 1"
      :time="forSeconds(orderObj.createTime + 60 * 15 * 1000)"
      format="HH:mm:ss"
      @change="onChange"
    >
      <view
        >{{ timeData.hours }}:{{ timeData.minutes }}:{{
          timeData.seconds
        }}</view
      >
    </u-count-down>
    <u-count-down
      v-else
      :time="forSeconds(orderObj.startTime)"
      format="HH:mm:ss"
      @change="onChange"
    >
      <view
        >{{ timeData.hours }}:{{ timeData.minutes }}:{{
          timeData.seconds
        }}</view
      >
    </u-count-down>
  </view>
  <!-- 待取货 | 配送中  -->
  <view
    class="confirmChange"
    @click="confirmChange"
    v-if="Types.statusType != 0"
  >
    <!-- 待取货 配送中 -->
    <view class="GoodsCollected flex_al_cen_ju_bet">
      <view class="btn_icon_box">
        <view class="phone" @click="getPhoneList">
          <image
            v-if="orderObj.riderClientStatus == 4"
            class="btn_icon"
            src="../../static/images/pulice/phone_icon_cc.png"
            mode=""
          ></image>
          <image
            v-else
            class="btn_icon"
            src="../../static/images/pulice/phone_icon.png"
            mode=""
          ></image>
          <view
            :style="{ color: orderObj.riderClientStatus == 4 ? '#AAAAAA' : '' }"
            >联系</view
          >
        </view>
        <view class="btn_icon_center_solid"></view>
        <view class="phone" @click="clickIsShow">
          <image
            v-if="orderObj.riderClientStatus == 1 && orderObj.status == 1"
            class="btn_icon"
            src="../../static/images/pulice/convertOrder_icon.png"
            mode=""
          ></image>
          <image
            v-else
            class="btn_icon"
            src="../../static/images/pulice/convertOrder_icon_cc.png"
            mode=""
          ></image>
          <view
            :style="{
              color:
                orderObj.riderClientStatus == 1 && orderObj.status == 1
                  ? ''
                  : '#AAAAAA',
            }"
            >转单</view
          >
        </view>
      </view>
      <!-- 配送中|待取货帮我买 --><!-- 配送中|待取货 帮我送-- 帮我取 -->
      <template v-if="true">
        <view
          class="btn"
          @click.stop="takeGoods(orderObj, orderObj.currentStatus)"
        >
          {{
            orderObj.riderDo == 1
              ? orderObj.BtnSaveTitle
              : orderObj.BtnSaveTitle
          }}
        </view>
      </template>
    </view>
  </view>
  <!-- 转单弹出层 -->
  <c-refund-bottom-popup
    :isShow="isShow"
    popupTitle="转单原因"
    @clickConfirm="clickConfirm"
    @isShowFalse="isShowFalse"
    :radiolist="radiolist"
  ></c-refund-bottom-popup>

  <!-- 电话联系 弹出层 -->
  <c-phone-mask-list
    :orderId="orderId"
    :phone="orderObj.riderPhone"
    :mapType="statusShowType"
    :phoneListShow="phoneListShow"
    :phoneBtnList="phoneBtnList"
    @btnCancel="btnCancel"
  ></c-phone-mask-list>

  <DefaultPage
    v-if="defaultShow == true"
    :type="'notCommodity'"
    :tips="'暂无数据'"
  ></DefaultPage>
  <u-modal
    :show="baseDataShow.sendCode"
    style="z-index: 99999"
    :title="baseDataShow.titleText"
    confirmText="确定"
    :showCancelButton="true"
    class="cdoeInput"
    cancelColor="#AAAAAA"
    :confirmColor="baseDataShow.colorShow == true ? '#FF0000' : '#000'"
    @cancel="cancelSendCode"
    @confirm="confirmSendCode"
  >
    <view class="modeCode">
      <!-- <u-code-input
        :borderColor="
          baseDataShow.codeTextShow == false ? '#FF0000' : '#f56c6c'
        "
        :disabledDot="true"
        @change="changeOrderCode"
        mode="box"
        dot
        :maxlength="6"
        hairline
      ></u-code-input> -->
      <view class="tip_text" v-if="baseDataShow.codeTextShow">
        <u-text type="error" :text="baseDataShow.codeText"></u-text>
      </view>
    </view>
  </u-modal>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, reactive } from "vue";
import RunErrandsOrderDetails from "@/Hooks/Order/RunErrandsOrderDetails";
import DefaultPage from "@/components/DefaultPage.vue";
import { onLoad } from "@dcloudio/uni-app";
import { forDate, forHour, forSeconds, textTime } from "@/utlis/time";
import { getLocation } from "@/utlis/uni_api";
import { riderLocationCache } from "@/Pinia";
const { proxy } = getCurrentInstance() as any;
const Types = reactive({
  statusType: null, // 订单状态 {0,1,2}
  orderType: null, // 订单类型 {0,1}  0 外卖 1 跑腿
  index: null, // 订单序号
});
const {
  isShow,
  clickIsShow,
  orderId,
  radiolist,
  clickConfirm,
  isShowFalse,
  getPhoneList,
  phoneBtnList,
  btnCancel,
  phoneListShow,
  confirmChange,
  timeData,
  onChange,
  takeGoods,
  getDelatis,
  baseDataShow,
  cancelSendCode,
  confirmSendCode,
  changeOrderCode,
  orderObj,
  makeOrder,
  defaultShow,
  butChange,
  callPhone,
  statusShowType,
  routeLine,
  covers,
} = RunErrandsOrderDetails(proxy, Types);
const Title = ref<string>("外卖订单");
const TitleShow = ref<boolean>(true);
onLoad((options: any) => {
  orderId.value = options.id;
  Types.index = proxy.$page.options.index;
  Types.statusType = proxy.$page.options.Type;
  Types.orderType = proxy.$page.options.orderType;
  if (proxy.$page.options.orderType == 0) {
    Title.value = "外卖订单";
  } else {
    Title.value = "跑腿订单";
  }

  let locationCacheObj = riderLocationCache();
  let locations =
    locationCacheObj.locationCacheObj.lon +
    "," +
    locationCacheObj.locationCacheObj.lat;
  proxy
    .$API(proxy)
    .CoordinateTransformation(locations, false)
    .then(async (res: { longitude: string; latitude: string }) => {
      await getDelatis(options.Type, options.id, res.longitude, res.latitude);
    });
  console.log(777, changeTitleText);
});

const timesTamp = new Date();
const nowSeconds = timesTamp.getTime();
</script>
<style scoped lang="scss">
@import "../../static/css/Order/HomeOrderDetails.scss";
</style>
